<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>私教预约</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="js/skcDetailsShare.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/vue/qs.js"></script>
</head>
<body style="background-color: #F5F5F5;">
<div id="app">
   <template>
		 <div class="fx_head" style="background-color: white">
            <div class="tx"><img :src="info.Picurl" alt=""></div>
            <template>
                <div class="content">
                    <div class="title fl">{{info.Title}}</div>
                    <div class="name fl">{{info.Sname}}</div>
                    <div class="clear h10"></div>
                    <div class="sj_time fl">{{info.Stime}}-{{info.Etime}}</div>
                    <div class="sj_time fl" style="margin-left: 0.1rem">{{info.Week}}</div>
                    <div class="sj_time fl" style="margin-left: 0.1rem">{{info.Chour}}分钟</div>
                    <div class="clear"></div>
                </div>
            </template>
            <div class="clear"></div>
    </div>
    <div class="h10 mg"></div>
    
    <div class="fx_main" style="background-color: white">
        <!--课程简介的-->
        <div class="kc_jianjie" v-if="timelist.length>0">
            <div v-for="(item,index) in timelist" v-if="item.type=='1'" class="sj_time_list sj_check_no">{{item.stime}}</div>
            <div v-else-if="currIndexss==index||item.type=='1'" 
             class="sj_time_list sj_check" >{{item.stime}}</div>
            <div v-else class="sj_time_list"  @click="currClick(index,item.stime,item.etime)">{{item.stime}}</div>
        </div>
        <div v-else style="text-align: center;color:#0e71ee;font-size: .14rem;">
            ！此课程暂无可预约时间段
        </div>
        <div class="clear"></div>
    </div>
    <div v-show="isLogo">
        <div class="fx_main" style="background: #fff;padding-top:0;">
                <div class="fx_ts" style="padding-top:0;">以下会员卡都可以上此课程哦~ 欢迎购买</div>
                <div class="fx_card_list">
                    <div class="fx_card" v-for="item in wdl_card_list">
                        <div class="icon">
                            <img v-if="item.Cardtype=='30'" src="images/card30.png" alt="">
                            <img v-else-if="item.Cardtype=='20'" src="images/card20.png" alt="">
                            <img v-else src="images/card10.png" alt="">
                        </div>
                        <div class="content">
                            <div class="title">{{item.Cardname}}</div>
                            <div><span class="l">巨惠价</span><span class="r">￥{{item.Charge}}</span></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
        </div>
        <div class="yy_down">
            <div class="yy_btn" @click="logo">请先登录后预约</div>
        </div>
    </div>
    <!--会员卡列表-->
    <div class="h10 mg"></div>
    <div class="yy_card_list" v-show="!isLogo" style="background-color: white;">
        <div class="title">会员卡</div>
        <template>
            <div class="card" v-for="(item,index) in card_list">
                <div class="icon"><img src="images/card.png" alt="会员卡"></div>
                <div class="content">
                    <div>
                        <div class="card_name">{{item.Cardname}}</div>
                        <div class="ye" v-if="item.Cardtype=='10'">剩余{{item.Surplus}}天</div>
                        <div class="ye" v-else-if="item.Cardtype=='20'">剩余{{item.Surplus}}次</div>
                        <div class="ye" v-else-if="item.Cardtype=='70'">剩余{{item.Surplus}}分钟  </div>
                        <div class="ye" v-else>剩余{{item.Surplus}}元</div>
                        <div class="clear"></div>
                    </div>
                    <div class="card_time">{{item.Time}}</div>
                    <div v-if="item.is_yy=='0'">
                        <div @click="selected(index,item.id,item.Csid)" v-if="currIndex==index">
                            <div class="jf">{{item.Account}}</div>
                            <div class="xz"><img src="images/xz.png"></div>
                        </div>
                        <div @click="selected(index,item.id,item.Csid)" v-else>
                                <div class="jf">{{item.Account}}</div>
                                <div class="xz"><img src="images/wxz.png"></div>
                        </div>
                    </div>
                    <div v-else>
                        <div>
                            <div class="jf">{{item.Account}}</div>
                            <!-- <div class="xz"><img src="images/xz.png"></div> -->
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <!-- <div>暂无可用的会员</div> -->
        </template>
    </div>
        
    <div class="yy_down" v-show="!isLogo" v-if="card_list.length>0">
        <div class="yy_btn" @click="order">预约</div>
    </div>
    <div style="display: none;">
        <input ref="desc" id="desc"/>
        <input ref="descTitle" id="descTitle"/>
        <input ref="descImg" id="descImg"/>
    </div>
   </template>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            isLogo:true,
            currIndexss:'-1',
            info:{
                Title: "",
                Picurl: "",
                Max: "",
                Min: "",
                Info: "",
                yy_num: '',
                SEtime: "",
                Sname: "",
                Space_name: ""
            },
            card_list:[],
            from:{
                date:'',
                poneid:'',
                key:'',
                plan_id:'',
                stime:'',
                etime:'',
                pstime:'',
                petime:'',
                cid:'',
                csid:''
            },
            currIndex:'0',
            wdl_card_list:[],
            timelist:[],
            vid:''
        },
        created(){
            this.setCanS()
        },
        methods:{
            //设置参数
            setCanS(){
                let Request = new Object()
                Request = GetRequest()
                this.from.poneid = Request['poneid']
                this.from.key = Request['key']
                this.from.date = Request['date']
                this.from.plan_id = Request['pid']
                this.vid = Request['vid']
                this.share =Request['share']
                if(this.share=="share"){
                    sessionStorage.setItem('logo',"0")
                    sessionStorage.setItem('vid',this.vid)
                    this.getToken()
                }else{
                    this.getlists()
                    this.kcShare()
                }
            },
            getlists(){
                window.vant.Toast.loading({
                    mask: true,
                    message: '加载中...'
                    });
                const params={
                    date:this.from.date,
                    key:this.from.key,
                    poneid:this.from.poneid,
                    plan_id:this.from.plan_id
                }
                //console.log(params)
                getVs()
                axios.get('/mobileapi/member/curriculum_p.php?act=sj_yy_list',
                {params:params}).then(data =>{
                    console.log(data.data)
                    let { msg, code,user} = data.data
                        if (code !== 200) {
                            _this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            window.vant.Toast.clear();
                            data=data.data
                            //判断是否登录
                            console.log(data.data.logn_type)
                            if(data.data.logn_type=='1'){
                                this.isLogo=false
                            }else{
                                this.isLogo=true
                            }
                            this.card_list=data.data.cardlist
                            this.info=data.data.info
                            if(this.info.Picurl==null||this.info.Picurl==''){
                                this.info.Picurl="images/xiangce.png"
                            }
                            this.from.pstime=this.info.Stime
                            this.from.petime=this.info.Etime
                           if(this.card_list.length>0){
                                this.from.cid=this.card_list[0].id
                                this.from.csid=this.card_list[0].Csid
                           }
                            this.wdl_card_list=data.data.wdl_cardlist
                            this.timelist=data.data.timelist
                        }
                    }).catch(function (error) {
                        console.log(error); 
                })
            },
            selected(index,id,csid){
                console.log(index)
                this.currIndex=index
                this.from.cid=id
                this.from.csid=csid
            },
            //预约
            order(){
                let from=JSON.stringify(this.from)
                let sign=md5(from)
                const params={
                    from:from,
                    sign:sign
                }
                //console.log(params)
                getVs()
                axios.post('/mobileapi/member/curriculum_p.php?act=sj_yy',Qs.stringify(params)).then(data =>{
                    console.log(data.data)
                    let { msg, code,user} = data.data
                        if (code !== 200) {
                            window.vant.Toast.fail(msg)
                        } else {
                            window.vant.Toast.success('预约成功')
                            this.timer = setTimeout(this.list, 2000);
                        }
                    }).catch(function (error) {
                        console.log(error); 
                })
            },
            list(){
                window.location.href="curriculum_p.html"
            },
            //没有登录跳转到登录页
            logo(){
                //获取当前页面的logons等于1是未登录
                let logons='1'
                window.location.href='login.html?islogos='+logons+'&vid='
            },
            //选中
            currClick(index,stime,etime){
                this.currIndexss=index
                this.from.stime=stime
                this.from.etime=etime
            },
            //课程分享内容
            kcShare(){
                const params={
                    plan_id:this.from.plan_id
                }
                getVs()
                axios.get('/mobileapi/member/wxfx.php?act=get_kc_fx',
                {params:params}).then(data =>{
                    console.log(data.data)
                    let { msg, code,user} = data.data
                        if (code !== 200) {
                            
                        } else {
                            data=data.data
                            this.$refs.desc.value=data.data.desc
                            this.$refs.descTitle.value=data.data.title
                            this.$refs.descImg.value=data.data.picurl
                        }
                    }).catch(function (error) {
                        console.log(error); 
                })
            },
            //获取分享的token
            getToken(){
                const params={
                    vid:sessionStorage.getItem('vid')
                }
                sessionStorage.setItem('logo','0')
                axios.get('/mobileapi/token.php?act=gettoken',{params:params}).then(data =>{
                    console.log(data)
                    let { msg, code,user} = data.data
                        if (code !== 200) {
                            window.vant.Toast.fail(msg)
                        } else {
                            sessionStorage.setItem('token',data.data.Gtoken)
                            this.getlists()
                            this.kcShare()
                        }
                    }).catch(function (error) { 
                        console.log(error); 
                });
            },
        }
    })
</script>       
</html>